<template>
  <n-dropdown :options="options" @select="handleDropdown">
    <hover-container px-12 h-full>
      <n-avatar round />
      <span pl-8 text-16>
        {{ userStore.userInfo.username }}
      </span>
    </hover-container>
  </n-dropdown>
</template>

<script lang="tsx" setup>
import type { DropdownOption } from "naive-ui";
import { useUserStore } from "@/store";
import { Icon } from "@iconify/vue";

const userStore = useUserStore();

const options: DropdownOption[] = [
  {
    label: "用户中心",
    key: "user-center",
    icon: () => <Icon icon="carbon:user-avatar"></Icon>,
  },
  {
    type: "divider",
    key: "divider",
  },
  {
    label: "退出登录",
    key: "logout",
    icon: () => <Icon icon="carbon:logout"></Icon>,
  },
];

type DropdownKey = "user-center" | "logout";

function handleDropdown(optionKey: string) {
  const key = optionKey as DropdownKey;
  if (key === "logout") {
    window.$dialog?.info({
      title: "提示",
      content: "您确定要退出登录吗？",
      positiveText: "确定",
      negativeText: "取消",
      onPositiveClick: () => {
        userStore.logout();
      },
    });
  }
}
</script>

<style scoped></style>
